import React, {Component} from 'react';
import IceContainer from '@icedesign/container';
import FoundationSymbol from 'foundation-symbol';
import {Grid,Table,Dialog,Feedback,Badge} from '@icedesign/base';
import IceLabel from '@icedesign/label';
import AddMenu from './components/AddMenu';
import EditMenu from './components/EditMenu';
import API from '../../../../tools/API';
import './SysMenuList.scss'
import QueryMenu from './components/QueryMenu';

const {Row, Col} = Grid;
/**
*  菜单管理
*/
export default class SysMenuList extends Component{
  constructor(props) {
     super(props);
     this.state = {
       isLoading:true,
       query:{},
       data:[],
       openRowKeys:[]
     }
     this.getMenuListData = this.getMenuListData.bind(this);
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.getMenuListData();
  }

  getMenuListData(){
    //获取当前登录用户信息
    API.getMenuListData(this.state.query).then((res) => {
      let openKey = this.state.openRowKeys;
      if (openKey.length == 0) {
        //设置展开tree
        for(let v of res.result) {
          openKey.push(v.id)
        }
        openKey = openKey;
      }
      this.setState({data:res.result,openRowKeys:openKey,isLoading:false});
    })
  }

  //菜单名称
  renderName = (value,index,record) =>{
    return(
      <span style={{marginLeft:5}}>
          <FoundationSymbol type={record.icon} style={{margin:'0 5px'}} size={"small"} />
          {
            record.type == 1?
              <span style={{fontWeight:'bold',color:'#666'}}>{record.name}
                {
                  record.label != undefined?"（"+record.label+"）": null
                }
              </span>
            :
              <span>{record.name}
                {
                  record.label != undefined?"（"+record.label+"）": null
                }
              </span>
          }
      </span>
    )
  }

  //地址
  renderHref = (value,index,record) => {
    return(
      <div>
        {
          record.href == "" || record.href==undefined?"#":
          <span >{record.href}</span>
        }
      </div>
    )
  }

  //类型
  renderType = (value,index,record) =>{
    return (
      <div>
        {
          record.type == 1?
              <IceLabel status="primary">目录</IceLabel>
          :record.type == 2?
              <IceLabel status="success">菜单</IceLabel>
          :
              <IceLabel status="warning">按钮</IceLabel>
        }
      </div>
    )
  }

  //可见
  renderIsShow = (value, index, record) => {
    return (
      <div>
        {
          record.is_show == 1?
            <div>
              <IceLabel status="success">显示</IceLabel>
              {/* <Badge dot style={{ backgroundColor: "#87d068",marginRight:5 }}></Badge>显示 */}
              {/* <IceLabel inverse={false} status="primary">显示</IceLabel> */}
            </div>
          :
            <div>
              <IceLabel status="danger">隐藏</IceLabel>
              {/* <Badge dot style={{marginRight:5 }}>隐藏</Badge> */}
              {/* <IceLabel inverse={false} status="default">隐藏</IceLabel> */}
            </div>
        }
      </div>
    )
  }

  //删除菜单
  deleteMenu = (id) =>{
    let dialog = Dialog.confirm({
      content: "确定要删除吗？",
      locale: {
        ok: "确认",
        cancel: "取消"
      },
      onOk: () => {
        return new Promise(resolve => {
          API.deleteMenu({id:id}).then((res) => {
            Feedback.toast.success("删除成功");
            this.getMenuListData();
            dialog.hide();
          });
        });
      }
    });
  }

  //操作
  renderOperate = (value,index,record) =>{
    return (
      <div>
        <EditMenu menuId={record.id} reload={this.getMenuListData}/>
        <span style={{margin:'0 5px'}}>
          <EditMenu reload={this.getMenuListData} menu={record}/>
        </span>
        <span style={{margin:'0 5px'}} onClick={this.deleteMenu.bind(this,record.id)}>
          <a href="javaScript:;">删除</a>
        </span>
      </div>
    )
  }

  onRowOpen = (openRowKeys) => {
    this.setState({openRowKeys:openRowKeys});
  }


  render(){
    return(
      <div>
        <IceContainer title="菜单列表" loading = {this.state.isLoading}>
          <QueryMenu updateQuery={(json)=>{
              this.setState({query:json});
            }} reload={this.getMenuListData}/>
          <div className="menu-caozuo">
            <AddMenu reload={this.getMenuListData}/>
          </div>
          <Table
            dataSource={this.state.data}
            hasBorder={false}
            primaryKey="id"
            isTree = {true}
            indentSize={12}
            openRowKeys={this.state.openRowKeys}
            onRowOpen = {this.onRowOpen}
          >
            <Table.Column width={200} title="菜单名称" cell={this.renderName.bind(this)}/>
            <Table.Column align={"center"} width={80}title="排序" dataIndex="sort" />
            <Table.Column align={"center"} width={200} title="请求地址" cell={this.renderHref.bind(this)} />
            <Table.Column align={"center"} width={80}title="类型" cell={this.renderType.bind(this)} />
            <Table.Column align={"center"} width={160} title="权限标识" dataIndex="permission" />
            <Table.Column align={"center"} width={80}title="可见" cell={this.renderIsShow.bind(this)} />
          <Table.Column align={"center"} width={140} title="操作" cell={this.renderOperate.bind(this)} />
          </Table>
        </IceContainer>
      </div>
    )
  }
}
